import React, { memo,useEffect,useState } from 'react'
import { useHistory } from 'react-router-dom'
import Scroll from '../../baseUI/scroll'
import './Main.css'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
import { forceCheck } from 'react-lazyload'

import Classify from 
    '../../components/main/classify/Classify'
import RotationChart from 
    '../../components/main/rotationChart/RotationChart'
import MenuBar from 
    '../../components/main/MenuBar/MenuBar'
import  ImageList from '../../components/main/imgList/ImgList'
import SearchInput from '../../components/main/searchInput/SearchInput'
import MainPopup from '../../components/mainPupop/MainPupop'
import HomeService from '@/components/main/homeService/HomeService'
import FrameLayout from '@/components/main/frameLayout/FrameLayout'
import ListData from '../../components/listData/ListData'

import { reqlist } from '@/api/index'

const Main = (props) => {
    // 状态
    const { maindata } = props
    // action
    const { getMainDataDispatch } = props
    const { classify=[],  rotationImg=[],menuBarData={} } = maindata

    const history = useHistory();
    
    const [showPopup,setShowPopup] = useState(false)
    const [display,setDisplay] = useState(false)

    // 数据列表数据 和 页数
    const [list, setList] = useState([])
    const [page,setPage] = useState(1)
    const [isScrollToButtom,setIsScrollToButtom] = useState(false)

    function handleOnclick() {
        setShowPopup(!showPopup)
        
    }
    function  handlePullUp(params) {
        if(!isScrollToButtom) {
            setPage(page + 1)
        }else {
            console.log('数据加载中')
        }
        
        console.log('下拉刷新');
    }
    function handlePullDown(params) {
        console.log('上拉加载更多');
    }

    useEffect(() => {
        if (!maindata.length) {
            getMainDataDispatch()
        }
        
    }, [])

    // 获取文章数据
    useEffect(() => {
        setIsScrollToButtom(true)

        reqlist(page)
            .then(data => {
                console.log(data)
                setList([
                    ...list,
                    ...data.data.data.list
                ])
                setIsScrollToButtom(false)
            })
    },[page])

    return (
        <div className="main">
            <SearchInput 
                handleOnclick={handleOnclick}
                searchBoxHandOnclick={() => {
                    history.push('/search')
                }}
            />
            <Scroll
                direction={"vertical"}
                refresh={false}
                pullUp={handlePullUp}
                pullDown={handlePullDown}
                onScroll={
                    (e) => {
                        if(e.y < -1142) {
                            setDisplay(true)
                        } else {
                            setDisplay(false)
                        }
                        forceCheck()
                    }
                }
                >
                <div className="main-padding">
                    <Classify classify={classify}/>
                    <RotationChart rotationImg={rotationImg}/>
                    <MenuBar menuBarData={menuBarData}/>
                    <ImageList></ImageList>
                    <FrameLayout />
                    <HomeService />
                    <ListData list={list} isScrollToButtom={isScrollToButtom}/>

                </div> 
            </Scroll>
            <MainPopup 
                display={showPopup}
                handleOnclick={handleOnclick}
            />
            {/*  */}
            
        </div>
    )
}
const mapStateToPorps = (state) => {
    return {
        maindata: state.main.maindata
    }
}
const mapStateToDispatch = (dispatch) => {
    return {
        getMainDataDispatch() {
            dispatch(actionTypes.getMainData())
        }
    }
}

export default connect(mapStateToPorps, mapStateToDispatch)(memo(Main))
